<template>
	<view class="user-content" :style="{'--color': color}">

		<status-bar ref='statusbar' :title='tabTitle' back='0' :showSetting='vid?1:0'></status-bar>

		<view class="toTop">
			<view class="user-msg flex-box align-center">
				<view class="user-head" @click="toLogin">
					<image :src="userinfo && userinfo.headimg?userinfo.headimg:$imgUrls(logo)" mode="aspectFill">
					</image>
					<text class="vip-tag" :style="{'background': configJson.card_font_color}"
						v-if='userinfo && userinfo.status == 1'>{{userinfo.vipName}}</text>
				</view>
				<view class="flex">
					<view class="flex-box align-center" v-if='userinfo'>
						<text class="user-name lines ">{{userinfo.nickName}}</text>
						<view class="mlist " v-if='userinfo.roleInfo'>
							<view class="flex-box align-center thmeColor m-top10"
								@click="toUrl('/moneyPage/distributors/myFans',true)">
								<text>{{userinfo.roleInfo.roleLevelName}}:</text>
								<text class="n">{{ userinfo.roleInfo.roleLevel}}</text>
								<text class="iconfont icon-xiangyouxiayiye"></text>
							</view>
						</view>
					</view>
					<text class="user-name" v-else @click="showModal=true">立即登录</text>
					<view class="flex-box align-center  mlist f-wrap">
						<view class="flex-box align-center thmeColor m-top10" @click="toUrl('/moneyPage/capital/myMoney',true)">
							<text
								v-if='nameDefinition'>{{nameDefinition.balanceTitle?nameDefinition.balanceTitle:'余额'}}({{unit}}{{nameDefinition.balanceUnit?nameDefinition.balanceUnit:'元'}}):</text>
							<text class="n">{{money?money:'0'}}</text>
							<text class="iconfont icon-xiangyouxiayiye"></text>
						</view>
						<view class="flex-box align-center thmeColor m-top10"
							@click="toUrl('/userPage/sign/integralRecord',true)">
							<text v-if='nameDefinition'>{{nameDefinition.fenTitle?nameDefinition.fenTitle:'积分'}}:</text>
							<text class="n">{{ userinfo && userinfo.sign?userinfo.sign:0 }}</text>
							<text class="iconfont icon-xiangyouxiayiye"></text>
						</view>
					</view>

				</view>
				<view class="icon-box flex-box">
					<view @click="toSign">
						<text class="icon-qiandao iconfont"></text>
						<view>签到</view>
					</view>
					<view v-if='startUp.service_state == 1' @click="toUrl('/userPage/message/messageList',true)">
						<text class="icon-conversation_icon iconfont" :data-num='userinfo.unreadMsg'
							:class="{unread: parseInt(userinfo.unreadMsg)>0}"></text>
						<view>消息</view>
					</view>
				</view>
			</view>
			<view class="msgList flex-box">
				<view class="msgItem msgItem_wechat" v-if='wxQRCode' @click="getWxQRCode">
					<image :src="imgUrl+'/Uploads/singleSale/singleSaleShopH5/demoTpl/2/static/icon/WeChat.png'"
						class="weixin_img"></image>
					<text>关注公众号</text>
				</view>

				<!--  End 新增公众号点击进入详情页关注  -->

				<view class="msgItem" @click="toUrl('/userPage/user/discount_coupon',true)">
					<text class="msgNum">{{ userinfo && userinfo.couponCount?userinfo.couponCount:0}}</text>
					<text class="msgTxt">优惠券</text>
				</view>

				<template>
					<view class="msgItem" @click="toUrl('/userPage/user/CollectList',true)">
						<text class="msgNum">{{ userinfo && userinfo.collectCount?userinfo.collectCount:0}}</text>
						<text class="msgTxt">收藏夹</text>
					</view>
					<view class="msgItem" @click="toUrl('/userPage/user/followList',true)">
						<text class="msgNum">{{ userinfo && userinfo.followCount?userinfo.followCount:0}}</text>
						<text class="msgTxt">{{nameDefinition.storeDefinitionName}}关注</text>
					</view>
				</template>

				<view class="msgItem" @click="toUrl('/userPage/user/viewed',true)">
					<text class="msgNum">{{footprint}}</text>
					<text class="msgTxt">足迹</text>
				</view>
			</view>

			<!-- 已是会员 -->
			<view class="iAmVip" v-if='userinfo && userinfo.status == 1'>
				<view class="vipCard">
					<image :src="$imgUrls(configJson.card_bgimg)" mode="scaleToFill"></image>
					<view class="vip-more" v-if='configJson.content'
						@click="toUrl('/userPage/user/introduce?type=1&title='+configJson.entrance_name,false)"
						:style="{color: configJson.card_font_color}">
						<text>{{ configJson.entrance_name }}</text>
						<text class="iconfont icon-xiangyouxiayiye"></text>
					</view>
					<view class="vip-number" v-if='configJson' :style="{
						left: configJson.number_position.x+'%',
						top: configJson.number_position.y+'%',
						color: configJson.card_font_color,
						fontSize: configJson.number_size + 'rpx'
					}">{{ userinfo.sn_id }}</view>
				</view>
			</view>
			<!-- 不是会员-->
			<view class="notVip" v-else @click="showModal=true">
				<view class="card-box">
					<image class="card" :src="$imgUrls(configJson.card_bgimg)" mode="scaleToFill"></image>
				</view>
				<image class="halfCicle" :src="staticUrl+'/images/jh_up/halfCicle.png'"></image>
			</view>
		</view>
		<!-- 订单中心 -->
		<view class="orderBox" v-if='configJson'>
			<view class="orderCenter">
				<view class="title flex-box align-center">
					<text class="orderTitle flex">订单中心</text>
					<text class="lookAll" @click="toUrl('/pages/index/orderList',true)">查看全部订单</text>
					<text class="iconfont icon-xiangyouxiayiye"></text>
				</view>
				<view class="orderSort" v-if='configJson'>
					<view @click="toUrl('/pages/index/orderList?status=0',true)" :data-num='orderCount.unpay'
						:class="{unread: parseInt(orderCount.unpay)>0}">
						<image class="orderIcon" :src="staticUrl+'/images/jh_up/icon-daifukuan.png'" mode="aspectFit">
						</image>
						<text>待支付</text>
					</view>
					<view @click="toUrl('/pages/index/orderList?status=3',true)" :data-num='orderCount.delivery'
						:class="{unread: parseInt(orderCount.delivery)>0}">
						<image v-if='configJson.delivery==2' class="orderIcon" :src="staticUrl+'/images/jh_up/icon-daihexiao.png'"
							mode="aspectFit"></image>
						<image v-else class="orderIcon" :src="staticUrl+'/images/jh_up/icon-daifahuo.png'" mode="aspectFit">
						</image>
						<text>{{ configJson.delivery=='2'?'待核销':'待收货' }}</text>
					</view>
					<view @click="toUrl('/pages/index/orderList?status=4',true)" :data-num='orderCount.comment'
						:class="{unread: parseInt(orderCount.comment)>0}">
						<image class="orderIcon" :src="staticUrl+'/images/jh_up/icon-daipingjia.png'" mode="aspectFit">
						</image>
						<text>待评价</text>
					</view>
					<view @click="toUrl('/pages/index/orderList?status=5',true)">
						<image class="orderIcon" :src="staticUrl+'/images/jh_up/icon-yipingjia.png'" mode="aspectFit">
						</image>
						<text>已评价</text>
					</view>
					<view @click="toUrl('/pages/index/orderList?status=6',true)" :data-num='orderCount.refund'
						:class="{unread: parseInt(orderCount.refund)>0}">
						<image class="orderIcon" :src="staticUrl+'/images/jh_up/icon-tuikuan.png'" mode="aspectFit">
						</image>
						<text>退款/售后</text>
					</view>


				</view>
			</view>
		</view>



		<view class="orderBox" v-if='configJson && Result.warehouse_mode == 1'>
			<view class="orderCenter bgwhite bor_radius_10">

				<view class="title flex-box align-center">
					<text class="orderTitle flex">仓库中心</text>
					<view class="d-flex a-center" @click="toUrl('/warehouse/giftrecord',true)">
						<view class="iconfont icon-a-002 color_33 h6 m-right10"></view>
						<text class="lookAll">赠送记录</text>
						<text class="iconfont icon-xiangyouxiayiye"></text>
					</view>
				</view>



				<view class="row p-top20">
					<view class="d-flex w-20 f-column a-center p-re" @click="toUrl('/pages/index/orderList?status=0',true)">
						<view class="iconfont icon-a-003 color_33 size54"></view>
						<text class="color_33 h6 bold m-top6">待支付</text>
						<view class="tipNumber" v-if="noPayOrde.noPayOrderCount > 0">{{noPayOrde.noPayOrderCount}}</view>
					</view>
					<view class="d-flex w-20 f-column a-center p-re" @click="toUrl('/warehouse/house',true)">
						<view class="iconfont icon-a-004 color_33 size54"></view>
						<text class="color_33 h6 bold m-top6">我的仓库</text>
						<view class="tipNumber" v-if="noPayOrde.availableGoodsCount > 0">{{noPayOrde.availableGoodsCount}}</view>
					</view>
					<view class="d-flex w-20 f-column a-center p-re" @click="toUrl('/warehouse/house?status=3',true)">
						<view class="iconfont icon-a-005 color_33 size54"></view>
						<text class="color_33 h6 bold m-top6">待发货</text>
					</view>
					<view class="d-flex w-20 f-column a-center p-re" @click="toUrl('/warehouse/house?status=2',true)">
						<view class="iconfont icon-a-006 color_33 size54"></view>
						<text class="color_33 h6 bold m-top6">已使用</text>
					</view>
					<view class="d-flex w-20 f-column a-center p-re" @click="toUrl('/pages/index/orderList?status=6',true)">
						<view class="iconfont icon-a-007 color_33 size54"></view>
						<text class="color_33 h6 bold m-top6">售后</text>
						<view class="tipNumber" v-if="noPayOrde.serviceOrderCount > 0">{{noPayOrde.serviceOrderCount}}</view>
					</view>
				</view>


			</view>
		</view>




		<!-- 订单状态 -->
		<orderStatus></orderStatus>

		<!-- 我的服务 -->
		<view class="orderBox">
			<view class="orderCenter">
				<view class="title">
					<text class="orderTitle">常用功能</text>
				</view>
				<view class="orderSort">
					<view @click="showKefu_(true)">
						<view class="iconfont icon-a-zu1901 black size54"></view>
						<text>客服中心</text>

						<view class="mask kefu-box" @click.stop='showKefu_(false)' v-if='showKefu'>
							<view class="box flex-box thmeBg">
								<view @click="call" class="flex">
									<view class="flex-box align-center flex-center">
										<image class="Icon" :src="staticUrl+'/images/jh_up/icon-hotline.png'" mode="aspectFit">
										</image>
										<text>热线客服</text>
									</view>
									<view>{{configJson.serviceTelTime}}</view>
								</view>
								<!-- #ifdef H5 -->
								<view class="flex" v-if='startUp.service_state != 1'>
									<view @click="contact" class="flex-box align-center flex-center">
										<image class="Icon" :src="staticUrl+'/images/jh_up/icon-chat.png'" mode="aspectFit">
										</image>
										<text>在线客服</text>
									</view>
									<view>{{configJson.serviceTelTime}}</view>
								</view>
								<!-- #endif -->
								<!-- #ifndef H5 -->
								<view class="flex">
									<view @click="contact" class="flex-box align-center flex-center">
										<image class="Icon" :src="staticUrl+'/images/jh_up/icon-chat.png'" mode="aspectFit">
										</image>
										<text>在线客服</text>
									</view>
									<view>{{configJson.serviceTelTime}}</view>
									<!-- #ifdef MP-WEIXIN -->
									<button open-type="contact" bindcontact="handleContact" class="btn-contact"
										v-if='startUp.service_state != 1'></button>
									<!-- #endif -->
								</view>
								<!-- #endif -->
							</view>
						</view>
					</view>

					<view @click="toUrl('/userPage/distributors/fenxiaoCenter?state=1',true)" v-if="teamConfig.u_id >= 1">
						<image class="orderIcon serverIcon" :src="staticUrl+'/images/jh_up/guanli1.png'" mode="aspectFit"></image>
						<text>团队管理</text>
						<text class="thmeColor icon icon-addTodo-nav"></text>
					</view>

					<view @click="toUrl('/joinPage/agentCenter',true)" v-if="userinfo.agent_id > 0">
						<view class="iconfont icon-a-010 black size54"></view>
						<text>代理商</text>
					</view>
					<view @click="Sweep">
						<view class="iconfont icon-saoyisao2 black size52"></view>
						<text>扫一扫</text>
					</view>
					<view @click="toUrl('/orderPage/Addresslist/Addresslist',true)">
						<view class="iconfont icon-wodedizhi1 black size54"></view>
						<text>地址管理</text>
					</view>
					<view @click="toUrl(`/pages/reserve/formSubmit?ordId=${roleInfo.sncode_id}`,true)"
						v-if="roleInfo.sn_show == 1">
						<view class="iconfont icon-a-010 black size54"></view>
						<text>申请合伙人</text>
					</view>
					<view @click="toUrl('/userPage/distributors/fenxiaoCenter?state=0',true)" v-if='roleInfo.money_show == 1'>
						<view class="iconfont icon-share1 black size54"></view>
						<text>分享赚钱</text>
					</view>

					<view @click="toUrl('/pages/reserve/myRreserve',true)">
						<view class="iconfont icon-a-zu1895 black size54"></view>
						<text>我的预约</text>
					</view>
					<view @click="toUrl('/commentPage/comment/myComment',true)">
						<view class="iconfont icon-a-zu1900 black size54"></view>
						<text>我的评价</text>

					</view>
					<view v-if="Result.warehouse_mode == 1 && userinfo.refund_num > 0" @click="isDeposit = true">
						<view class="iconfont icon-a-005 black size54"></view>
						<text>退押金</text>
					</view>
					<!-- 微信端走快捷登录 无需修改密码 -->
					<!-- #ifndef MP-WEIXIN -->
					<view @click="toUrl('/userPage/user/changePassword',false)" v-if='vid && vid != 0'>
						<view class="iconfont icon-dingbu_xiugaimima black size54"></view>
						<text>修改密码</text>
					</view>
					<!-- #endif -->


					<view v-if="Result.courseGoodsCount > 0" @click="toUrl(`/answer/curriculum`,true)">
						<view class="iconfont icon-a-wodekecheng_huaban1-01 black size54"></view>
						<text>我的课程</text>

					</view>
					<view v-if="about_us_list_id" @click="toUrl(`/userPage/user/aboutUs?listId=${about_us_list_id}`,false)">
						<view class="iconfont icon-a-guanyuwomen_huaban1-01 black size54"></view>
						<text>关于我们</text>

					</view>

					<view v-if="Result.isDispatchStaff == 1" @click="toUrl(`/userPage/Install/Install`,false)">
						<view class="iconfont icon-yuangongguanli color_33 size50"></view>
						<text class="m-top4">{{Result.isDispatchStaff_name}}</text>
					</view>

					<view v-if="userinfo.is_private_member == 1" @click="toUrl(`/privatePage/index/index`)">

						<view class="iconfont icon-yunying black size54"></view>

						<text>私域运营</text>
					</view>

				</view>
			</view>
		</view>



		<!-- 猜你喜欢 -->
		<recommend :pageData="goodsList" title="猜你喜欢" v-if="goodsList.length"></recommend>






		<showModel @cancelFunc='closeModel' goHome='0' v-if='showModal' type='2'></showModel>

		<!-- 返回顶部 -->
		<backTop v-if='toTop'></backTop>

		<!-- Start 弹框识别公众号 -->
		<view class="pop_account" v-if='wxQRCode && wxQRCode_switch'>
			<view class="popCenter">
				<image :show-menu-by-longpress='true' :src="$imgUrls(wxQRCode)" mode="widthFix"></image>
				<text class="iconfont icon-guanbi closepop" @click="getclose_wxQRCode"></text>
			</view>

		</view>

		<!-- End 弹框识别公众号 -->
		<Deposit :isDeposit="isDeposit" :userinfo="userinfo" @close="closeDeposit"></Deposit>
		<contact></contact>
		<tabBar :tab="2"></tabBar>
	</view>
</template>

<script>
	import recommend from '@/components/home/recommend.vue'
	import contact from '@/components/contact/contact.vue'
	import orderStatus from '@/components/User/orderStatus.vue'
	import Deposit from '@/components/User/Deposit.vue'
	import {
		mapState
	} from "vuex"
	var that
	export default {

		components: {
			recommend,
			contact,
			orderStatus,
			Deposit
		},
		data() {
			return {
				staticUrl: this.staticUrl,
				isDeposit: false, // 退押金
				userinfo: '', // 用户信息
				money: 0,
				unit: '',
				imgUrl: this.imgUrl,
				footprint: '0', // 足迹
				orderCount: {
					delivery: 0,
					prepare: 0,
					unpay: 0
				},
				showModal: false, // 是否显示模态框
				toTop: false,
				postConfig: getApp().globalData.postConfig,
				configJson: '', // 会员卡信息
				showKefu: false,

				signInState: '0', //活动开启 1 开启   0未开启  未开启则去旧签到功能界面

				goodsList: [],

				wxQRCode: '',
				wxQRCode_switch: false,
				wxUrl: "",

				teamConfig: '', // 团队管理
				about_us_list_id: '',
				Result: '',
				myOrder: [],
				current: 0,
				noPayOrde: {}, // 仓库数量
				roleInfo: '',
			}
		},
		onLoad() {
			that = this;
			// that.showModal = false;
			// that.getUserinfo();
		},

		onShow() {
			that = this;
			that.getUserinfo();
			that.getBasicInfo();
		},
		methods: {
			closeDeposit() {
				this.isDeposit = false;
				this.getUserinfo();
			},
			getBasicInfo() {
				let that = this;
				that.$http.post({
					url: '/zzj_singleSaleApi/getMyOrderBasicInfo',

				}).then(res => {
					if (res.errcode != '100') return that.$Toast(res.msg);
					that.noPayOrde = res.data;
				})
			},

			toLogin() {
				if (!this.vid) return this.showModal = true;
				this.toUrl(`/userPage/user/userinfo`)
			},
			getUlike() { // 猜你喜欢
				that.$http.post({
					url: '/singleSaleApi/guessLikeGoods',
				}).then(res => {
					if (res.code != 100) return;
					this.goodsList = res.data;
				})
			},
			applyStation() {
				if (that.userinfo.station_master == 0) {
					this.toUrl('/pages/reserve/formSubmit?ordId=2147', true)
				} else {
					this.toUrl('/moneyPage/station/index', true)
				}
			},
			toSign() {
				if (that.signInState == 1) {
					this.toUrl('/userPage/sign2/sign_in', true)
				} else {
					this.toUrl('/userPage/sign/sign_in', true)
				}
			},
			showKefu_(flag) {
				if (that.configJson.serviceImg) {
					that.toUrl('/userPage/user/introduce?type=2')
				} else {
					that.showKefu = flag
				}
			},
			closeModel() {
				let that = this;
				that.showModal = false;
				that.getUserinfo();
				that.getHistory();
			},
			clear() {
				uni.clearStorageSync();
				this.$Toast('清理成功')

				setTimeout(function() {
					that.backHome()
				}, 1000);
			},
			toUrl(url, flag) { // flag:是否判断vid

				if (flag && (!this.vid || this.vid == 0)) {
					that.showModal = true;
					return
				}
				if (url) {
					if (url == '/userPage/login/binding?type=1') {
						// #ifdef MP-WEIXIN
						that.showModal = true;
						return
						// #endif
					}
					uni.navigateTo({
						url: url
					})
				}
			},
			contact: function() {

				if (this.vid) {
					if (this.startUp.service_state == 1) { // 客服系统
						uni.navigateTo({
							url: "/userPage/message/consult"
						})
					} else {
						that.call()
						// uni.navigateTo({
						// 	url: "/userPage/onlineService/webHttp"
						// })
					}
				} else {
					that.showModal = true
				}
			},
			getUserinfo() { // 获取用户信息

				that.$http.post({
					url: '/SRA_userIntegral/myInfo',
					data: {
						VeriCode: that.bid,
						vId: this.vid,
					}
				}).then(res => {

					if (res.data) {
						this.Result = res.data;

						this.about_us_list_id = res.data.about_us_list_id;
						if (res.data.myJson) {
							that.userinfo = res.data.myJson;
							that.roleInfo = res.data.myJson.roleInfo;
							that.teamConfig = res.data.teamConfig;
							that.orderCount = res.data.myJson.order_count
							var m = parseFloat(res.data.myJson.money)
							if (m > 9999) {
								that.unit = '万'
								// 保留两位小数、不四舍五入
								// m = (m / 10000).toFixed(2)
								m = Math.floor(m / 10000 * 100) / 100
							}
							that.money = m
						}
						if (res.data.configJson)
							that.configJson = res.data.configJson;
						that.wxQRCode = res.data.configJson.wxQRCode; // 公众号二维码
						that.wxUrl = res.data.configJson.wxUrl;
						console.log(res.data.configJson.wxUrl);
						if (res.data.signInState)
							that.signInState = res.data.signInState
						// that.getUlike()
						that.getHistory();
					} else {
						that.userinfo = ''
						that.orderCount = {
							delivery: 0,
							prepare: 0,
							unpay: 0
						}
						that.money = 0;

					}
					uni.stopPullDownRefresh()
				})
			},
			getHistory() { // 获取足迹
				that.$http.post({
					url: '/singleSaleApi/footprint',
				}).then(res => {
					if (res.count) that.footprint = res.count;
				})
			},
			getWxQRCode() {
				that.wxQRCode_switch = true;
				// console.log(this.wxUrl);
				// uni.navigateTo({
				// 	// url:'https://www.baidu.com/'
				// 	url:'/userPage/distributors/fenxiaoCenter'
				// })

			},
			getclose_wxQRCode() {
				that.wxQRCode_switch = false;
			},

			Sweep() {
				if (!this.vid) return this.showModal = true;
				this.$pop.scanCode().then(res => {
					;
					if (res.result) this.toUrl(`/joinPage/playCode?id=${res.result}`)
				}).catch(err => {
					console.log(err);
				})
			}

		},

		computed: {
			...mapState(['vid', 'bid', 'logo', 'nameDefinition', 'startUp', 'color', 'tabTitle', 'share']),
		},

		onPageScroll(e) {
			if (e.scrollTop > 200) {
				that.toTop = true;
			} else {
				that.toTop = false
			}
		},
		onShareAppMessage(res) {
			let share = this.share;
			return {
				title: share.title,
				desc: share.desc,
				path: `/pages/index/index?share_v_id=${this.vid}&pageType=999`,
				imageUrl: `${share.imageUrl}`
			}
		},

	}
</script>

<style scoped lang="scss">
	.Icon_img {
		width: 50rpx;
		height: 50rpx;
	}

	.icon-addTodo-nav {
		position: absolute;
		left: 50%;
		top: 9%;
		font-size: 20rpx;
	}

	.user-content {
		background-color: #F5F5F5;

	}

	.orderBox {
		margin: 24rpx 0;

		.title {
			padding: 24rpx 24rpx 10rpx 24rpx;
		}

		.icon-xiangyouxiayiye {
			font-size: 28rpx;
			color: #828282;
		}
	}

	.msgList {
		margin: 10rpx 0 0 0;
		padding-bottom: 40rpx;
		position: relative;
		z-index: 1;
		justify-content: space-around;

		.msgItem {
			text-align: center;
			flex: 1;

			.msgNum {
				font-weight: bold;
				color: white;
				display: block;
				font-size: 30rpx;
				margin-top: 20rpx;
			}

			.msgTxt {
				color: white;
				opacity: .8;
			}
		}
	}

	.msgItem_wechat {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
		justify-content: space-between;

		.weixin_img {
			width: 70rpx;
			height: 70rpx;
		}

		text {
			width: 100%;
			color: #FFFFFF;
			font-size: 12px;
			opacity: 0.8;
		}
	}

	.user-msg {
		padding: 24rpx;
		padding-right: 10rpx;

		.user-head {
			position: relative;

			image {
				border-radius: 50%;
				width: 100rpx;
				height: 100rpx;
			}

			.vip-tag {
				background-color: #333333;
				color: white;
				padding: 0 10rpx;
				border-radius: 20rpx;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: -10rpx;
				font-size: 20rpx;
				white-space: nowrap;
			}
		}

		.user-name {
			max-width: 240rpx;
			color: white;
			font-size: 30rpx;
			font-weight: bold;
			margin: 0 10rpx 0 20rpx;
			position: relative;
			z-index: 99;
		}

		.mlist {
			padding-left: 20rpx;

			view {
				background-color: #FFFFFF;
				border-radius: 40rpx;
				padding: 2rpx 10rpx 2rpx 16rpx;
				margin-right: 20rpx;

				text {
					color: inherit;

					&.n {
						font-weight: bold;
						font-size: 26rpx;
						margin-left: 4rpx;
					}
				}

				.iconfont {
					margin-left: 4rpx;
					opacity: 0.3;
				}
			}
		}

		.icon-box {
			position: relative;
			top: -2rpx;

			.icon-qiandao {
				color: white;
				font-size: 40rpx;
				padding: 0 20rpx;
			}

			.icon-conversation_icon {
				color: white;
				font-size: 40rpx;
				padding: 0 20rpx;
				position: relative;
				top: 2rpx;
			}

			view {
				text-align: center;
				color: white;
				font-size: 24rpx;
			}
		}


	}

	.vipLevel {
		background: #F9E1BE;
		height: 39rpx;
		line-height: 42rpx;
		color: #734D25;
		border-radius: 18rpx;
		display: inline-block;
		padding: 0 20rpx;
		font-size: 24rpx;
		margin: 0 6rpx 0 0;
	}

	.notVip {
		position: relative;
		z-index: 1;
		overflow: hidden;

		.card-box {
			padding: 0 20rpx;
			height: 128rpx;

			.card {
				height: 355rpx;
				border-radius: 12rpx;
			}
		}

		.halfCicle {
			height: 26rpx;
			width: 100%;
			display: block;
			position: relative;
			z-index: 3;
		}
	}

	.iAmVip {
		margin: 0 24rpx 216rpx;
		height: 160rpx;
		position: relative;
		z-index: 1;

		.vipCard {
			height: 351rpx;
			position: relative;

			.vip-more {
				position: absolute;
				right: 20rpx;
				bottom: 20rpx;
				color: #333333;
				z-index: 33;

				text {
					color: inherit;
					padding-left: 6rpx;
				}
			}

			.vip-number {
				color: #333333;
				font-size: 34rpx;
				font-weight: bold;
				position: absolute;
				left: 6.5%;
				top: 60%;
			}

			image {
				width: 100%;
				height: 100%;
				border-radius: 12rpx;
			}
		}
	}

	.orderCenter {
		margin: 0 24rpx;
		background: white;
		border-radius: 12rpx;
		padding-bottom: 24rpx;
		min-height: 228rpx;

		.orderTitle {
			color: #343434;
			font-size: 30rpx;
			font-weight: bold;
		}

		.lookAll {
			color: #828282;
		}

		.orderSort>view {
			display: inline-block;
			width: 20%;
			text-align: center;
			margin-top: 20rpx;
			position: relative;

			.orderIcon {
				width: 50rpx;
				height: 50rpx;
				margin: 0 auto;
				text-align: center;
				position: relative;

			}

			.serverIcon {
				position: relative;
				z-index: 1;
			}

			.serverIcon::before {
				position: absolute;
				content: '';
				top: 5%;
				left: 5%;
				width: 90%;
				height: 90%;
				z-index: -1;
			}

			text {
				display: block;
				color: #222222;
				line-height: 60rpx;
				height: 60rpx;
				white-space: nowrap;
			}

			.icon-denglu1 {
				font-size: 27rpx;
				position: absolute;
				right: 46rpx;
				top: 8rpx;
				z-index: 2;
				font-weight: bold;
			}

			.icon-c {
				position: absolute;
				left: 50%;
				top: 14rpx;
				width: 12rpx;
				height: 12rpx;
				border-radius: 50%;
				z-index: 2;
				transform: translateX(-50%);
			}

			.icon-q {
				position: absolute;
				right: 76rpx;
				top: -6rpx;
				font-size: 18rpx;
				font-weight: bold;
				z-index: 2;
			}

			.icon-z {
				position: absolute;
				right: 60rpx;
				top: 16rpx;
				width: 12rpx;
				height: 12rpx;
				z-index: 2;
				transform: scale(0.9);
			}

			.icon-zx {
				position: absolute;
				left: 50%;
				top: 40rpx;
				width: 8rpx;
				height: 4rpx;
				display: inline-block;
				z-index: 2;
				margin-left: -2rpx;
				border-radius: 6rpx;
				transform: translateX(-50%);
			}

			.icon-02 {
				position: absolute;
				top: 4rpx;
				right: 50rpx;
				z-index: 2;
				font-size: 16rpx;
				font-weight: bold;
			}

			.icon-question {
				position: absolute;
				top: -4rpx;
				left: 50%;
				transform: translateX(-50%);
				z-index: 2;
				font-size: 30rpx;
				font-weight: bold;
			}

			.icon-Fill3 {
				position: absolute;
				top: -18rpx;
				right: 54rpx;
				z-index: 2;
				font-size: 22rpx;
			}

			.icon-xuanzhong {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				top: -6rpx;
				font-weight: bold;
				font-size: 24rpx;
				z-index: 2;
			}

			.icon-weibiaoti-_huaban {
				position: absolute;
				right: 48rpx;
				top: 6rpx;
				font-size: 24rpx;
				font-weight: bold;
				z-index: 2;
			}

			.icon-g {
				position: absolute;
				right: 64rpx;
				top: -2rpx;
				font-size: 34rpx;
				font-weight: bold;
				z-index: 2;
			}

			.icon-bianzu {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				font-size: 30rpx;
				top: -14rpx;
				font-weight: 400;
				z-index: 2;
			}

			.icon-shenqingzhanchang02 {
				position: absolute;
				right: 40rpx;
				font-size: 34rpx;
				top: 6rpx;
				font-weight: 400;
				z-index: 2;
			}

			.icon-chengshihehuoren01 {
				position: absolute;
				right: 42rpx;
				font-size: 42rpx;
				top: 0rpx;
				font-weight: 400;
				z-index: 2;
			}

			.icon-guanggaoshenqing01 {
				position: absolute;
				right: 40rpx;
				font-size: 32rpx;
				top: 4rpx;
				font-weight: 400;
				z-index: 2;
			}

			.icon-kechengshangchuan01 {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				font-size: 42rpx;
				top: -8rpx;
				font-weight: 400;
				z-index: 2;
			}

			.icon-bianzu6 {
				position: absolute;
				left: 48rpx;
				font-size: 24rpx;
				transform: scale(0.7);
				top: -4rpx;
				font-weight: 400;
				z-index: 2;
			}

			.icon-bianzu4 {
				position: absolute;
				left: 50%;
				transform: translateX(-50%) scale(0.6);
				font-size: 24rpx;
				top: 4rpx;
				font-weight: 400;
				z-index: 2;
			}

			.icon-bianzu5 {
				position: absolute;
				left: 66rpx;
				font-size: 34rpx;
				top: 6rpx;
				font-weight: 400;
				z-index: 2;
			}

			.icon-Fill4 {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				font-size: 22rpx;
				top: 0;
				font-weight: 400;
				z-index: 2;
			}
		}
	}

	.kefu-box {
		overflow-y: auto;
		padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));

		.box {
			padding: 30rpx;
			background-color: white;
			z-index: 3;
			width: 100%;
			// &.noImg{
			position: fixed;
			width: calc(100% - 60rpx);
			border-radius: 12rpx;
			left: 50%;
			transform: translateX(-50%);

			@keyframes bottom {
				0% {
					bottom: -200rpx;
				}

				100% {
					bottom: calc(130rpx + constant(safe-area-inset-bottom));
					bottom: calc(130rpx + env(safe-area-inset-bottom));
				}
			}

			animation: bottom .2s ease-in-out forwards;

			// }
			>view {
				font-size: 28rpx;
				font-weight: bold;

				text {
					font-size: 28rpx;
					font-weight: bold;
				}

				position: relative;

				&:nth-child(2) {
					border-left: 1px solid #EEEEEE;
				}

				.Icon {
					width: 42rpx;
					height: 42rpx;
					margin-right: 10rpx;
				}

			}
		}

		.icon-close-f {
			position: fixed;
			right: 30rpx;
			z-index: 3;
			margin-top: 30rpx;
			font-size: 50rpx;
			opacity: 0.7;
			color: #999999 !important;
		}
	}

	.pop_account {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.7);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 3444;
	}

	.popCenter {
		width: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		text-align: center;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);

		.distinguish {
			color: #FFFFFF;
			font-size: 16px;
			padding: 20rpx 0;
			display: block;
		}

		image {
			width: 100%;
			height: 100%;
		}

		.closepop {
			position: absolute;
			top: 20rpx;
			left: 40rpx;
			z-index: 3445;
		}
	}

	.iconBox {
		width: 50rpx;
		height: 50rpx;
	}

	.tipNumber {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		-webkit-border-radius: 50%;
		background: #EC1C1C;
		position: absolute;
		right: 26rpx;
		top: -4rpx;
		font-size: 24rpx;
		color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center
	}
</style>